<template>
  <div>
    <formCommon ref="childRules" :formItemList="formItemList" :value="form"></formCommon>

    <tableCommon :tableData="tableData" :columns="columns" :loading="loading" :pageObj="pageObj" :showIndex="true">
      <el-table-column slot="op" label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="editData(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="delData(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </tableCommon>
  </div>
</template>
<script>
import formCommon from "@/components/formCommon/formCommon.vue";

import tableCommon from '@/components/tableCommon/tableCommon'
export default {
  components: { tableCommon, formCommon },
  data() {
    return {
      loading: true,
      tableData: [],
      columns: [
        { label: '创建人', prop: 'creator' },
        { slot: 'op' }// 操作列
      ],
      pageObj: {
        show: true,
        pageSize: 10,
        total: 0,
        pageIndex: 1,
        pageIndexChange: (val) => {
          console.log(`当前页: ${val}`);
          this.pageObj.pageIndex = val
          this.getData()
        },
        sizeChange: (val) => {
          console.log(`每页 ${val} 条`);
          this.pageObj.pageSize = val
          this.getData()

        },
      },
      formItemList: [
          { 
            type: "text",
            prop: "key",
            label: "关键词",
            name: "key",
            placeholder: "请输入关键词"
          },
          {
            type: "select",
            prop: "key",
            label: "选择",
            name: "key",
            placeholder: "请选择",
            optList: [
              {
                value: "进港",
                label: "进港"
              },
              {
                value: "出港",
                label: "出港"
              }
            ]
          },
          {
            type: "btns",
            btns: [
              {
                styles: "primary",
                name: "查询",
                handleClick: this.search
              },
              {
                styles: "default",
                name: "重置",
                handleClick: this.add
              }
            ]
          }
        ],
      form: {
        key: "",
        mainOrSubBill: "",
        radio: ""
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 查询
    search() {
      let flag = this.$refs["childRules"].validateForm();
      if (flag) {
        console.log(this.form);
      }
    },
    // 新增或重置
    add() {
      this.$refs["childRules"].resetFields();
    },
    getData() {
      this.loading = true
      setTimeout((e) => {
        if (this.loading) {
          this.loading = false
        }
      }, 10000)
      setTimeout(() => {
        this.pageObj.total = 1
        this.tableData = [{ creator: '张三' }]
        this.loading = false
      }, 200);
      //   this.$api.typequery(`?page.index=${this.pageObj.pageIndex}&page.size=${this.pageObj.pageSize}&VagueQueryTypeName=${this.form.VagueQueryTypeName}`).then(res => {
      //     if (res.code == 1) {
      //       setTimeout(() => {
      //         this.pageObj.total = res.data.total
      //         this.tableData = res.data.rows
      //         this.loading = false
      //       }, 200);
      //     }
      //   })
    }
  }
}
</script>